<template>
	<uni-popup :show="searchShow" ref="popup" type="right" :animation="true" @change="change">
	<view class="panel_box" :style="'height:'+windHeight">
		<view class="panel_item box_title">搜索用户</view>
		
		<view class="panel_item box_search">
			<u-search placeholder="搜索用户" v-model="userKeyword" @search="userSearch"  shape="square" :showAction="false"></u-search> 
			<view class="search_list" v-if="userList.length>0">
				<view class="search_list_item" v-for="(item,index) in userList" :key="index">
					<view class="list_item_left">{{item.user_name}}</view>
					<view class="list_item_right" @click="addUser(index)"  ><uni-icons  type="plusempty" color="#9a9a9a" :size="icons[34]" />添加</view>
				</view>
				
			</view>
		</view>
		
		<view class="panel_item">
			<view class="item_tag" v-for="(item,index) in sUserMap" :key="index"> 
				<u-tag bgColor="#910a15" borderColor="#f3f3f3" :text="item.user_name" size="mini"  closable :show="true" @close="closeTag(index)"></u-tag>
			</view>
		</view>
		<!--<view class="panel_item box_title">仓库编码</view>
		<view class="panel_item box_search">
			<uni-easyinput type="text" v-model="cWhCode" placeholder="请输入仓库编码"  clearable="false"/>
		</view>-->
		<view class="panel_item box_title">仓库名称</view>
		<view class="panel_item box_search">
			<uni-easyinput type="text" v-model="cWhName" placeholder="请输入仓库名称"  clearable="false"/>
		</view>
		<view class="panel_item box_title">产品名称</view>
		<view class="panel_item box_search">
			<uni-easyinput type="text" v-model="cInvName" placeholder="请输入产品名称"  clearable="false"/>
		</view>
		
		
		<view class="panel_item box_title">规格说明</view>
		<view class="panel_item box_search">
			<uni-easyinput type="text" v-model="cInvStd" placeholder="请输入规格说明"  clearable="false"/>
		</view>
		
		<view  class="panel_bottom"> 
			<view class="seach_opt">
				<view class="button_box">
					<button type="default" size="mini" @click="searchSubmit">点击确认</button>	
				</view>

			</view>
		</view>
	</view>
	
	</uni-popup>
</template>
<script>
import {api} from '@/pages/quantity/libs/api.js';
export default {
	name: 'searchBox',
	props: {
		show:{type:Boolean,default:false},
		searchData:{type:Object,default:{}}
	},
	
	watch:{
		searchShow(val){
			this.$emit('update:show', val);
			this.popupOpt();
		},
		
		show(val) {
			this.searchShow = val;
		},
		
		/*searchData(val) {
			this.searchInfo = val;
		},*/
	
		searchInfo(val){
			this.$emit('update:searchData', val);
		}

	},
	
    data() {
		return {
			searchShow:false,
			sUserMap:[],
			userList:[],
			userKeyword:"",
			cWhCode:"",
			cWhName:"",
			cInvName:"",
			cInvStd:"",
			icons:{"50":uni.upx2px(50),"60":uni.upx2px(60),"40":uni.upx2px(40),"34":uni.upx2px(34)},
			windHeight:uni.getSystemInfoSync().windowHeight+"px",
			searchInfo:this.searchData,
			showBox: false,
		}
    },
    methods: {
		async userSearch(){
			this.userList=[];
			if(!this.userKeyword) return false;
			this.userList=await api.userList({"user_name":this.userKeyword});
		},
		
		addUser(index){
			this.sUserMap.push(this.userList[index]);
			this.userList=[];
		},
		
		closeTag(index){
			this.sUserMap.splice(index,1);
		},
		
		searchSubmit(){
			let cPosCode=[];
			let searchData={};
			for(let index in this.sUserMap){
				if(!this.sUserMap[index]["user_number"]) continue;
				cPosCode.push(this.sUserMap[index]["user_number"]);
			}

			let cPosCodeStr=cPosCode.join(",");
			searchData["cPosCode"]=cPosCodeStr;
			searchData["userKeyword"]=this.userKeyword;
			searchData["cWhCode"]=this.cWhCode;
			searchData["cWhName"]=this.cWhName;
			searchData["cInvName"]=this.cInvName;
			searchData["cInvStd"]=this.cInvStd;
			this.searchInfo=searchData;
			this.searchShow=false;
		},
	
		popupOpt:function(show){
			if(this.searchShow){
				this.$refs.popup.open('right');
			}else{
				this.$refs.popup.close();
			}
		},
		
		change:function(e) {
			this.searchShow=e.show;
		}
		
    }
  }
</script>



<style>
	@import 'search-box.css';
</style>
